// import ajax from "../../util/request";
import "./hello-word.css";
import { useState, useRef } from "react"
import {Outlet} from 'react-router-dom'
//函数组件

function HelloWord(props) {
    //  返回一个数组，第一个是状态值，第二个是改变状态值的方法
    let [list, setList] = useState([]);
    // 钩子函数，替代类组件的ref
    const nameinput = useRef();


    function handleclick() {
        const value = nameinput.current.value
        if (value) {
            list.push(value)
            setList([...list])
            console.log(list);

        }

    }


    return (
        <>
            <h1 className="h1">{props.title}</h1>

            <input type="text" ref={nameinput} />
            <button onClick={handleclick}>点击</button>
            <ol>
                {list.map(v => <li key={v}>{v}</li>)}
            </ol>
           
            <Outlet></Outlet>
        </>



    )
}
// 记得暴露出去
export default HelloWord                   